<!-- KnowledgeGraphBrowser.vue -->
<template>
  <div class="knowledge-graph-container">
    <div class="header">
      <h2 class="panel-title"><i class="icon-link"></i> 多模态知识图谱浏览器</h2>
      <el-select class="data-select" v-model="selectedSource" placeholder="数据源选择" size="small">
        <el-option v-for="item in dataSources" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="graph-wrapper">
      <div ref="graphChart" class="graph-visualization"></div>
    </div>
    <div class="legend">
      <div class="legend-item"><div class="legend-circle signal"></div>信号源</div>
      <div class="legend-item"><div class="legend-circle device"></div>设备</div>
      <div class="legend-item"><div class="legend-circle target"></div>目标</div>
      <div class="legend-item"><div class="legend-line strong"></div>强关联</div>
      <div class="legend-item"><div class="legend-line weak"></div>弱关联</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import {ElOption, ElSelect} from "element-plus";

export default defineComponent({
  name: 'KnowledgeGraphBrowser',
  components: {ElOption, ElSelect},
  setup() {
    const graphChart = ref(null);
    let chartInstance = null;
    const selectedSource = ref('source1');
    const dataSources = [
      { value: 'source1', label: '电磁频谱监测源' },
      { value: 'source2', label: '雷达信号采集源' },
      { value: 'source3', label: '卫星遥感数据源' }
    ];

    const initChart = () => {
      if (graphChart.value) {
        chartInstance = echarts.init(graphChart.value, 'dark');
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            formatter: function(params) {
              if (params.dataType === 'node') {
                return `${params.name}<br>类型: ${params.data.type}<br>关联数量: ${params.data.value}`;
              } else {
                return `${params.data.source} → ${params.data.target}`;
              }
            }
          },
          animationDuration: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'force',
              force: {
                repulsion: 400,
                edgeLength: [20, 120]
              },
              roam: true,
              label: {
                show: true,
                position: 'right',
                formatter: '{b}',
                fontWeight: 'bold',
                color: '#e0f7ff'
              },
              draggable: true,
              data: [
                { name: '信号A', x: 0, y: 0, symbolSize: 30, itemStyle: { color: '#e74c3c' }, type: '信号源', value: 8 },
                { name: '设备C', x: -50, y: 80, symbolSize: 45, itemStyle: { color: '#3498db' }, type: '设备', value: 12 },
                { name: '设备D', x: 100, y: 0, symbolSize: 35, itemStyle: { color: '#3498db' }, type: '设备', value: 6 },
                { name: '目标X', x: -120, y: 180, symbolSize: 50, itemStyle: { color: '#2ecc71' }, type: '目标', value: 15 },
                { name: '目标Y', x: 90, y: 150, symbolSize: 45, itemStyle: { color: '#2ecc71' }, type: '目标', value: 10 },
                { name: '信号B', x: 60, y: -100, symbolSize: 25, itemStyle: { color: '#e74c3c' }, type: '信号源', value: 5 }
              ],
              links: [
                { source: '信号A', target: '设备C', lineStyle: { width: 3, color: '#9b59b6' } },
                { source: '设备C', target: '目标X', lineStyle: { width: 5, color: '#1abc9c' } },
                { source: '设备C', target: '目标Y', lineStyle: { width: 4, color: '#1abc9c' } },
                { source: '信号A', target: '设备D', lineStyle: { width: 2, color: '#9b59b6' } },
                { source: '设备D', target: '目标Y', lineStyle: { width: 6, color: '#1abc9c' } },
                { source: '信号B', target: '设备D', lineStyle: { width: 4, color: '#9b59b6' } },
                { source: '信号B', target: '设备C', lineStyle: { width: 2, color: '#9b59b6' } }
              ],
              lineStyle: {
                opacity: 0.9,
                curveness: 0.3
              },
              emphasis: {
                lineStyle: {
                  width: 6
                }
              }
            }
          ]
        };

        chartInstance.setOption(option);

        // 窗口大小变化时重新调整图表
        window.addEventListener('resize', () => {
          if (chartInstance) chartInstance.resize();
        });
      }
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      if (chartInstance) {
        window.removeEventListener('resize', () => chartInstance.resize());
        chartInstance.dispose();
      }
    });

    return {
      graphChart,
      selectedSource,
      dataSources
    };
  }
});
</script>

<style scoped>
.knowledge-graph-container {
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8vh 0.5vw 1.5vh;
  border-bottom: 1px solid rgba(97, 130, 234, 0.2);
}

.panel-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title i {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2361dafb' d='M10 13h4v6l6-6H14V7H8v6h2v-2h2v4H8v-4h2v-2h-2v6l-6-6v-2l6-6v2H4v2h2v2h2v-2h2v-2h4v6h-2v2z'/%3E%3C/svg%3E");
}

.data-select {
  width: 16vw;
  background: rgba(16, 36, 68, 0.6);
  border: 1px solid rgba(97, 130, 234, 0.3);
}

.graph-wrapper {
  flex: 1;
  position: relative;
}

.graph-visualization {
  width: 100%;
  height: 100%;
  min-height: 40vh;
}

.legend {
  display: flex;
  gap: 1.5vw;
  justify-content: center;
  border-top: 1px solid rgba(97, 130, 234, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  font-size: 0.9rem;
}

.legend-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-circle.signal { background: #e74c3c; }
.legend-circle.device { background: #3498db; }
.legend-circle.target { background: #2ecc71; }

.legend-line {
  width: 24px;
  height: 3px;
  margin: 0 4px;
}

.legend-line.strong { background: #1abc9c; }
.legend-line.weak { background: #9b59b6; }
</style>